<template>
    <div id="app">
      <header>
        <div><img src="../../../assets/images/wallet-icon.png" alt=""></div>
        <p>总资产（元）</p>
      </header>
      <h1><em>¥</em>58,745,628.650</h1>
      <div class="earnings">
        <p>今日收益：<span class="baseColor">5,856.00</span></p>
        <p>可提现：<span class="baseColor">47,658,954.450</span></p>
      </div>
      <div class="btnBox">
        <router-link to="/RechargeConfirm" class="btnSmall">充值</router-link>
        <router-link to="/withdraw" class="btnSmall baseColor">提现</router-link>
      </div>
      <footer>
        <!--<router-link to="/changeCard">更换银行卡</router-link>-->
        <a @click="_queryChangeCard">更换银行卡</a>
        <p>(更换银行卡需先提现所有账户余额)</p>
      </footer>
    </div>
</template>

<script>
  import {localStorageGet} from '../../../assets/js/localStorage'
  export default {
        name: "wallet",
        methods:{
          _queryChangeCard(){
            let data = localStorageGet('idRealNamedata')
            if (data == 0) {
              this.$router.push('/changeCard')
            } else {
              this.$router.push('/realName')
            }
          }
        }
    }
</script>

<style  lang="less" scoped>
#app {
  header {
    div {
      width: 3.328rem;
      height: 3.328rem;
      border-radius: 50%;
      margin: 2.5rem auto 0.8rem;
    }
    p {
      text-align: center;
      font-size: 0.554rem;
      color: #999;
    }
  }
  h1 {
    font-size: 1.6rem;
    text-align: center;
    margin: 3rem auto 0.75rem;
    em {
      font-size: 0.9rem;
    }
  }
  .earnings {
    font-size: 0.597rem;
    color: #999;
    display: flex;
    margin: 0 1.4rem;
    p {
      flex: 1;
      text-align: left;
      &:nth-last-child {
        text-align: right;
      }
    }
  }
  .btnBox {
    margin-top: 3.2rem;
    a {
      margin-bottom: 0.75rem;
      &:nth-of-type(2) {
        background: #f6f6f6;
        border:1px solid #eee;
      }
    }
  }
  footer {
    position: fixed;
    width: 100%;
    bottom: 0.8rem;
    max-width: 750px;
    text-align: center;
    a {
      font-size: 0.512rem;
      display: block;
      margin-bottom: 0.1rem;
    }
    p {
      font-size: 0.47rem;
      color: #000076;
    }
  }
}
</style>
